<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加外访人员</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>

    <style>
        /*设置背景*/
        body{
            background-color: rgb(219, 243, 243);
        }
        /*最上方图片居中*/
        #img_four_1{
            height: 61px;
            width: 393px;
            margin: auto;
            margin-top: 20px;
            margin-bottom: 100px;
        }
        #div_four_size{
            width: 500px;
            margin: auto;
        }
        /*表单项*/
        .td_left{
            width: 100px;
            height:30px;
            text-align: right;
            padding-top: 30px;
        }
        .td_right{
            width: 400px;
            height:30px;
            padding-left: 10px;
            padding-top: 30px;
        }
        /*按钮*/
        #btn_sub{
            margin-top: 20px;
            margin-left: 50%;
        }
    </style>
    <script>
        //正则表达式
        //身份证
        function checkId_number() {
            var id_number = $("#id_number").val();
            var reg = /^\d{17,17}[0123456789X]$/;
            return reg.test(id_number);
        }
        //姓名
        function checkSname() {
            var sname = $("#sname").val();
            var reg = /^[\u4e00-\u9fa5]{2,4}$/;
            return reg.test(sname);
        }
        //楼栋号
        function checkBuilding() {
            var building = $("#building").val();
            var reg = /^\d{1,3}$/;
            return reg.test(building);
        }
        //房间号
        function checkRoom() {
            var room = $("#room").val();
            var reg = /^\d{1,3}$/;
            return reg.test(room);
        }
        //外访原因
        function checkCause() {
            var cause = $("#cause").val();
            var reg = /^[\u4e00-\u9fa5]+$/;
            return reg.test(cause);
        }
        //入口函数
        $(function () {
            //form表单的提交
            $("#add_stranger_form").submit(function () {
                if (checkId_number() && checkSname() && checkBuilding() && checkRoom() && checkCause()){
                    $.post("tea/addStranger",$("#add_stranger_form").serialize(),function () {
                        alert("添加成功！")
                        //刷新
                        location.reload();
                    });
                }
                return false;
            });

            //各个表单项的离焦事件
            //身份证号
            $("#id_number").blur(function () {
                if (checkId_number()){
                    $("#id_number").css("border","");
                }else{
                    $("#id_number").css("border","2px solid red");
                }
            });
            //姓名
            $("#sname").blur(function () {
                if (checkSname()){
                    $("#sname").css("border","");
                }else{
                    $("#sname").css("border","2px solid red");
                }
            });
            //楼栋号
            $("#building").blur(function () {
                if (checkBuilding()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //房间号
            $("#room").blur(function () {
                if (checkRoom()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //外访原因
            $("#cause").blur(function () {
                if (checkCause()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });

        });

    </script>
</head>
<body>
<div id="img_four_1"><img src="../img/tea_3.png" id="img_hint"></div>

<div id="div_four_size">
    <form action="#" method="get" id="add_stranger_form">
        <table>
            <tr>
                <td class="td_left">
                    <label for="id_number">身份证号码</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="id_number" name="id_number" placeholder="请输入外访人员的身份证号码"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="sname">姓名</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="sname" name="sname" placeholder="请输入外访人员的姓名"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="building">访问楼栋</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="building" name="building" placeholder="请输入外访人员访问的楼栋"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="room">访问房间号</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="room" name="room" placeholder="请输入外访人员访问的房间号"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="cause">访问原因</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="cause" name="cause" placeholder="请输入外访人员访问的原因"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="td_sub" ><input class="btn btn-info" type="submit" id="btn_sub" value="确定"></td>
            </tr>
        </table>
    </form>
</div>
<div style="float: right;margin-right: 150px">
    <a href="tea_main_page.html" class="btn btn-info">返回主界面</a>
</div>
</body>
</html>